<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    canvas{
        float: left;
    }
    #canvas{
        border: 1px solid #000;
    }
    #canvas1{
        border: 1px solid #000;
    }
    #canvas2{
        border: 1px solid #000;
    }
    #canvas3{
        border: 1px solid #000;
    }
    #canvas4{
        border: 1px solid #000;
    }
</style>
</head>
<body>
    <canvas id='canvas' width="400" height="400">你的浏览器不支持canvas,请升级你的浏览器</canvas>
    <canvas id='canvas1' width="400" height="400">你的浏览器不支持canvas,请升级你的浏览器</canvas>
    <canvas id='canvas2' width="400" height="400">你的浏览器不支持canvas,请升级你的浏览器</canvas>
    <canvas id='canvas3' width="400" height="400">你的浏览器不支持canvas,请升级你的浏览器</canvas>
    <canvas id='canvas4' width="400" height="400">你的浏览器不支持canvas,请升级你的浏览器</canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');

    var ctx=canvas.getContext('2d');
    
    var grd=ctx.createLinearGradient(55,50,80,75);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

    ctx.beginPath();
    ctx.fillStyle = grd;
    ctx.globalAlpha = 0.3;
    ctx.moveTo(55,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.lineTo(55,50);
    ctx.fill();//当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

    ctx.beginPath();
    ctx.strokeStyle = '#f77';
    ctx.lineWidth = 10;
    // ctx.lineCap = 'round';
    ctx.lineJoin = 'bevel';
    ctx.setLineDash([4, 2]);
    ctx.moveTo(350,25);
    ctx.lineTo(350,75);
    ctx.lineTo(300,75);
    ctx.lineTo(300,25);
    ctx.closePath();
    ctx.stroke()

    ctx.font="30px Arial";
    ctx.fillText("Hello World",200,200);
</script>
<script>
    var canvas1 = document.getElementById('canvas1');
    var ctx1=canvas1.getContext('2d');
    ctx1.beginPath();
    ctx1.arc(75,65,50,0,Math.PI*2,true); // 绘制
    ctx1.moveTo(110,75);
    ctx1.arc(75,75,35,0,Math.PI,false);  // 口(顺时针)
    ctx1.moveTo(65,65);
    ctx1.arc(60,65,5,0,Math.PI*2,true);  // 左眼
    ctx1.moveTo(95,65);
    ctx1.arc(90,65,5,0,Math.PI*2,true);  // 右眼
    ctx1.stroke();
    ctx1.closePath()

</script>
<script>
    var canvas2 = document.getElementById('canvas2');
    var ctx2=canvas2.getContext('2d');
    // 二次贝塞尔曲线
    ctx2.beginPath();
    ctx2.moveTo(75,25);
    ctx2.quadraticCurveTo(25,25,25,62.5);
    ctx2.quadraticCurveTo(25,100,50,100);
    ctx2.quadraticCurveTo(50,120,30,125);
    ctx2.quadraticCurveTo(60,120,65,100);
    ctx2.quadraticCurveTo(125,100,125,62.5);
    ctx2.quadraticCurveTo(125,25,75,25);
    ctx2.stroke();
</script>
<script>
    var canvas3 = document.getElementById('canvas3');
    var ctx3=canvas3.getContext('2d');
    //三次贝塞尔曲线
    ctx3.beginPath();
    ctx3.moveTo(75,40);
    ctx3.bezierCurveTo(75,37,70,25,50,25);
    ctx3.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx3.bezierCurveTo(20,80,40,102,75,120);
    ctx3.bezierCurveTo(110,102,130,80,130,62.5);
    ctx3.bezierCurveTo(130,62.5,130,25,100,25);
    ctx3.bezierCurveTo(85,25,75,37,75,40);
    ctx3.stroke();
</script>
<script>
    var canvas4 = document.getElementById('canvas4');
    var ctx4=canvas4.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx4.stroke(rectangle);
    ctx4.fill(circle);
</script>
</html>